<template>
  <div>
    <title-header :title="title"></title-header>
    <group label-width="4.2em" label-margin-right="1em" label-align="justify" class="m-1-t">
      <x-input title="当前密码" type="password" v-model="passwords"></x-input>
      <x-input title="新密码" type="password" v-model="passwords1"></x-input>
      <x-input title="确认密码" type="password" v-model="passwords2"></x-input>
    </group>
    <group title="密码长度6~32位">
    </group>
    <x-button type="warn" action-type="reset" class="btn-place" @click.native="showPosition('middle')">确定</x-button>
    <toast v-model="showPositionVerify" type="text" :time="800" is-show-mask text="请输入正确格式密码" width="15em"></toast>
    <toast v-model="showPositionValue" type="text" :time="800" is-show-mask text="两次密码不一致，请重新输入" width="20em"></toast>
  </div>

</template>
<script>
import {
  Group,
  XInput,
  XButton,
  Toast,
  TransferDomDirective as TransferDom
} from 'vux'
import TitleHeader from '@/components/titleHeader.vue'
export default {
  components: {
    Group,
    XInput,
    XButton,
    TitleHeader,
    Toast
  },
  data () {
    return {
      passwords: '',
      passwords1: '',
      passwords2: '',
      title: '修改密码',
      showPositionVerify: false,
      showPositionValue: false
    }
  },
  methods: {
    showPosition () {
      if (
        (this.passwords === ''|| this.passwords.length < 6)||
        (this.passwords1 === '' || this.passwords1.length < 6)||
        (this.passwords2 === ''|| this.passwords2.length < 6)
      ) {
        this.showPositionVerify = true
      } else {
        if (this.passwords1 != this.passwords2) {
          this.showPositionValue = true
        } else {
          this.$router.push('/userCenter')
        }
      }
    }
  }
}
</script>
<style scoped>
.m-1-t {
  margin-top: -1.3em;
}
.btn-place {
  width: 93%;
}
</style>
